<template>
  <div class="addroute">
    <span
      ><h3><span style="color: blue; bold">|</span>添加路线</h3></span
    >
    <div class="head">
      <el-row type="flex" justify="space-between">
        <el-col :span="6">
          <i class="el-icon-circle-plus">添加</i>
        </el-col>
      </el-row>
    </div>
    <div class="form">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="路线名称">
          <el-input
            v-model="formInline.routename"
            placeholder="路线名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="负责人员">
          <el-input
            v-model="formInline.username"
            placeholder="负责人员"
          ></el-input>
        </el-form-item>
        <el-form-item label="门店名称">
          <el-input
            v-model="formInline.storename"
            placeholder="门店名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="门店类型" prop="storetype">
          <!-- 门店类型 -->
          <el-select v-model="selectstore" clearable placeholder="门店类型">
            <el-option
              v-for="item in formInline.storetype"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div class="datelist">
      <el-row type="flex" justify="space-between">
        <el-col :span="6">
          <i class="el-icon-s-grid">门店信息</i>
        </el-col>
      </el-row>
    </div>
    <div class="routemain">
      <el-table
        border
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%; line-height: 0px"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="id" label="序号" width="120">
        </el-table-column>
        <el-table-column prop="num" label="编号" width="120"> </el-table-column>
        <el-table-column prop="storename" label="门店名称" width="120">
        </el-table-column>
        <el-table-column prop="storetype" label="门店类型" width="120">
        </el-table-column>
        <el-table-column label="移动" width="240">
          <!--  -->
          <el-button
            type="primary"
            icon="el-icon-top"
            circle
            title="上移"
          ></el-button>
          <el-button
            type="primary"
            icon="el-icon-bottom"
            circle
            title="下移"
          ></el-button>
          <el-button
            type="primary"
            icon="el-icon-caret-top"
            circle
            title="置顶"
          ></el-button>
          <el-button
            type="primary"
            icon="el-icon-caret-bottom"
            circle
            title="置底"
          ></el-button>
        </el-table-column>
        <el-table-column label="操作">
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            title="删除"
          ></el-button>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <div style="text-align: center; margin: auto">
      <el-button type="success" title="提交" round>提交</el-button>
      <el-button type="primary" title="返回" round @click="backUp"
        >返回</el-button
      >
    </div>
  </div>
</template>

<script>
//引入axios
import axios from 'axios';
export default {
  data() {
    return {
      selectstore: [], //门店类型选择默认状态
      //信息框
      formInline: {
        routename: "", //路线名称
        username: "", //负责人
        storename: "", //门店名称
        storetype: [
          {
            value: "1",
            label: "门店名称001",
          },
          {
            value: "2",
            label: "门店名称002",
          },
          {
            value: "3",
            label: "门店名称003",
          },
        ], //门店类型
      },
       //分页设置
      total: 0, // 总条数
      currentPage: 1, // 当前页码
      pageSize: 5, // 每页条数
      //门店列表
      tableData: [
        // {
        //   serialnumber: "1", //序号
        //   num: "1", //编号
        //   storename: "门店名称001", //门店名称
        //   storetype: "门店类型001", //门店类型
        // },
      ],
      tableList: [],
    };
  },
  methods: {
    // 分页逻辑以及数据查询展示
    getList() {
      axios({
        method: "get",
        url: "https://www.fastmock.site/mock/209040d286c0365d882a2dfa80a278fc/manager/editroute",
      })
        .then((res) => {
          //表单数据

          //表格数据
          this.tableList = res.data;
          this.tableData = []; //表单初始化
          //第一步：当前页的第一条数据在总数据中的位置
          let strlength = (this.currentPage - 1) * this.pageSize + 1;
          //第二步：当前页的最后一条数据在总数据中的位置
          let endlength = this.currentPage * this.pageSize;
          //第三步：此判断很重要，执行时机：当分页的页数在最后一页时，进行重新筛选获取数据时
          //获取本次表格最后一页第一条数据所在的位置的长度
          let resStrLength = 0;
          if (this.tableList.length % this.pageSize == 0) {
            resStrLength =
              (parseInt(this.tableList.length / this.pageSize) - 1) *
                this.pageSize +
              1;
          } else {
            resStrLength =
              parseInt(this.tableList.length / this.pageSize) * this.pageSize +
              1;
          }
          //如果上一次表格的最后一页第一条数据所在的位置的长度 大于 本次表格最后一页第一条数据所在的位置的长度，则将本次表格的最后一页第一条数据所在的位置的长度 为最后长度
          if (strlength > resStrLength) {
            strlength = resStrLength;
          }
          //第四步：此判断很重要，当分页的页数切换至最后一页，如果最后一页获取到的数据长度不足最后一页设置的长度，则将设置的长度 以 获取到的数据长度 为最后长度
          if (endlength > this.tableList.length) {
            endlength = this.tableList.length;
          }
          //第五步：循环获取当前页数的数据，放入展示的数组中
          for (let i = strlength - 1; i < endlength; i++) {
            this.tableData.push(this.tableList[i]);
            console.log("当前数据", this.tableList[i]);
          }
          //数据的总条数
          this.total = this.tableList.length;
          // console.log(this.total)
          //判断总条数与下拉选项的关系
          if (this.pageSize > this.tableList.length) {
            console.log(this.pagesize);
          } else {
            console.log(this.tableList.length); //每页下拉显示数据
          }
        })
        .catch((err) => {
          this.$message(err);
          // console.log(err);
        });
    },
    //分页
    handleSizeChange(pagesize) {
      this.pagesize = pagesize;
      this.getList();
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.getList();
      console.log(this.currentPage); //点击第几页
    },
    //返回
    backUp() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push("/");
    },
  },
  //预加载
  created() {
    this.getList();
  },
};
</script>

<style scoped>
.addroute {
  /* overflow-y: scroll; */
  height: auto;
}
.head {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
  height: auto;
}
.block {
  text-align: center;
}
</style>